<template>
  <div class="app-container">
    <PageContent ref="contentRef" :content-config="contentConfig" @addClick="addClick" @edit-click="handleEditClick"
      @export-click="handleExportClick" @toolbarClick="handleToolbarClick" >
      <template #image="scope">
        <div v-if="!!scope.row.image">
          <el-image
            style="width: 60px; height: 60px"
            :src="scope.row.image"
            fit="cover"
          />
        </div>
        <div v-else>
          <el-image
            style="width: 60px; height: 60px"
            class="rounded-full"
            :src="getImageUrl(`currency/${scope.row.code}.png`)"
            fit="cover"
          />
        </div>
      </template>
    </PageContent>
    <!-- 新增 -->
    <page-modal ref="addModalRef" :modal-config="addModalConfig" @submit-click="handleSubmitClick">
      <template #permissions="scope">
        <el-select multiple collapse-tags v-model="param[scope.prop]" @change="changeAdd(param,'add')">
          <template v-for="option in powerList" :key="option.id">
            <el-option :label="option.name" :value="option.id" />
          </template>
        </el-select>
      </template>
    </page-modal>

    <!-- 编辑 -->
    <page-modal ref="editModalRef" :modal-config="editModalConfig" @submit-click="handleSubmitClick">
      <template #permissions="scope">
        <el-select multiple collapse-tags v-model="param[scope.prop]" @change="changeAdd(param,'edit')">
          <template v-for="option in powerList" :key="option.id">
            <el-option :label="option.name" :value="option.id" />
          </template>
        </el-select>
      </template>
    </page-modal>
  </div>
</template>

<script setup>
import contentConfig from "./config/content";
import addModalConfig from "./config/add";
import editModalConfig from "./config/edit";
import usePage from "@/hooks/usePage";
import powerApi from '@/api/system/power'
import { getImageUrl } from '@/utils/common'
defineOptions({
  name: "paymentCurrency",
  inheritAttrs: false,
});
const { contentRef, addModalRef, editModalRef,
   handleAddClick,
  handleSubmitClick, handleExportClick, } = usePage();
const handleEditClick = async (row) => {
  editModalRef.value?.setModalVisible(row);
  param.value.permissions = []
  if (row.permissions) {
    for (let i in row.permissions) {
      param.value.permissions.push(row.permissions[i].id)
    }
    editModalRef.value?.setModalVisible(param.value);
  }
}
const addClick = () => {
  param.value.permissions = []
  handleAddClick()
}
const changeAdd = (obj, type) => {
  if (type === 'edit') {
    editModalRef.value?.setModalVisible(obj);
  } else if (type === 'add') {
    addModalRef.value?.setModalVisible(obj);
  }
}
const param = ref({
  permissions: []
})
const powerList = ref([])
const getRolesList = async () => {
  const { data } = await powerApi.getList({ page: 1, per_page: 10 })
  powerList.value = data
}
onMounted(() => {
  getRolesList()
})
</script>

<style></style>